/**
 *                              谷歌地图功能点
 *        文字描述                                        方法
 * 1、初始化地图                                        initMap()
 * 2、设置个人标记点                                     setMePositioning()
 * 3、画中心圆和销毁圆                                   drawCircle() 、clearCircle()
 * 4、接口请求加载动画                                   LoadAnimation()
 * 5、随机生成一段数据（实际中不需要）                     randomChinese()
 * 6、设置marker标记点和清空marker点                     setDataMarker() 、removeMarker()
 * 7、监听地图中心点的变化(滑动地图看变化)                  addListenerCnterChange()
 * 8、监听marker标记点点击显示信息窗口                    ListeningMarkerClick()
 * 9、可视地图放大缩小                                   setMapZoom()
 * 10、移除个人标记点                                    removeMeMarker()
 * 11、随机生成颜色rgb值                                 getRandomColor()
 * 12、画省  市、区                                      drawRegion()
 * 13、点击信息弹窗窗口                                   setTimeoutInfoWindowClick()
 * 14、清空省市区标记                                     clearDrawRegion()
 * 15、监听marker标记点 赋予当前点动画                     markerClickAnimation()
 * 16、画路线、清除路线                                    drawRoute() 、clearDrawRoute()
 * 17、放大、缩小                                         setMapCnterZooms()（和【9】一样都可以放大缩小地图）
 *     功能不同：map.setOptions({zoom: newZoom}) 可以用于设置和更改地图的所有属性，而 map.setZoom(newZoom) 仅用于更改地图的缩放级别。
 *     语法不同：map.setOptions() 方法接受一个包含更改设置的键值对对象作为参数，可以对地图进行更全面的控制。而 map.setZoom() 方法则直接接受新的缩放级别作为参数
 * 18、监听输入框输入事件                                  ListeningInputBox()
 * 19、重新定位                                          Repositioning()
 * 20、实时监听当前地理位置                                 realTimeWatchPosition()
 * 21、根据经度纬度获取地址                                 getAddress()
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *https://maps.gstatic.com/mapfiles/transparent.png - 透明的 PNG 图片。
 *https://maps.googleapis.com/maps/api/js+ /v1/shading/{layerId}/{zoom}/{x}/{y}?key=YOUR_API_KEY  - 地图阴影层图片。
 *https://maps.gstatic.com/mapfiles/ms2/micons/blue-dot.png - 蓝色标记图标。
 *https://maps.gstatic.com/mapfiles/ms2/micons/red-dot.png - 红色标记图标。
 *https://maps.gstatic.com/mapfiles/ms2/micons/green-dot.png - 绿色标记图标。
 *https://maps.gstatic.com/mapfiles/ms2/micons/yellow-dot.png - 黄色标记图标。
 *https://maps.gstatic.com/mapfiles/ms2/micons/orange-dot.png - 橙色标记图标。
 *https://maps.gstatic.com/mapfiles/ms2/micons/pink-dot.png - 粉色标记图标。
 *https://maps.gstatic.com/mapfiles/ms2/micons/purple-dot.png - 紫色标记图标。
 *https://maps.gstatic.com/mapfiles/ms2/micons/blue.png - 蓝色方形图标。
 *https://maps.gstatic.com/mapfiles/ms2/micons/red.png - 红色方形图标。
 *https://maps.gstatic.com/mapfiles/ms2/micons/green.png - 绿色方形图标。
 *https://maps.gstatic.com/mapfiles/ms2/micons/yellow.png - 黄色方形图标。
 *https://maps.gstatic.com/mapfiles/ms2/micons/orange.png - 橙色方形图标。
 *https://maps.gstatic.com/mapfiles/ms2/micons/pink.png - 粉色方形图标。
 *https://maps.gstatic.com/mapfiles/ms2/micons/purple.png - 紫色方形图标。 
 *
 *  数据可视化平台：http://datav.aliyun.com/portal/school/atlas/area_selector
 *  const pos = {
 *       lat: position.coords.latitude,
 *      lng: position.coords.longitude,
 *   };
 *   map.setCenter(pos); 将地图中新的中心点设置为当前位置
 * 
 */




var lats = getQueryVariable('lat') * 1;
var lngs = getQueryVariable('lng') * 1;
let openInfoWindow; //信息窗口
var cityCircle = ""; //圆
var meMarker = ''; //个人位置标记点
var markers = []; //marker标记点

var maxValue = 10;
var nums = 15 - maxValue / 3;
var zoom = Number(nums); //地图缩放比例
var map; //地图
var activeTab = 1; //1热门  2：推荐
var newPolygon = []; //画省 市区 
var lastClickedMarker = ""; //记录当前点击的marker
var directionsRendererArr = []; //地图路线
var drawRouteMarker = []; //路线marker
var searchmarker = "";
var coords = ""
var mapId = "a2935898ae85ea79"

/**
 * 根据经度纬度获取相对应的地址信息
 *  提取 国家 省/州 市 区/县 路 门牌号  
 * 
 * */
function getAddress(latitude, longitude) {
	// 根据经纬度发起 Reverse Geocoding API 请求，获取地址信息
	var geocoder = new google.maps.Geocoder();
	var latlng = {
		lat: latitude,
		lng: longitude
	};
	var cityInfo = {
		country: "", //国家
		province: "", //省
		city: "", //市
		district: "", //区
		street: "", //街道	
		door: "", //门牌号
		address: "", //详细地址
	}

	geocoder.geocode({
		location: latlng
	}, function(results, status) {
		if (status === 'OK') {
			if (results[0]) {
				console.log(results[0])
				for (var i = 0; i < results.length; i++) {
					var components = results[i].address_components;
					for (var j = 0; j < components.length; j++) {
						var component = components[j];
						if (component.types.includes("country")) {
							console.log("国家: " + component.long_name);
							cityInfo.country = component.long_name || '暂无';
						} else if (component.types.includes("administrative_area_level_1")) {
							console.log("省/州: " + component.long_name);
							cityInfo.province = component.long_name || '暂无';
						} else if (component.types.includes("locality")) {
							console.log("城市: " + component.long_name);
							cityInfo.city = component.long_name || '暂无';
						} else if (component.types.includes("sublocality_level_1")) {
							console.log("区/县: " + component.long_name);
							cityInfo.district = component.long_name || '暂无';
						} else if (component.types.includes("route")) {
							console.log("路/街道名: " + component.long_name);
							cityInfo.street = component.long_name || '暂无';
						} else if (component.types.includes("street_number")) {
							console.log("门牌号: " + component.long_name);
							cityInfo.door = component.long_name || '暂无';
						}
					}
				}
				cityInfo.address = results[0].formatted_address;
				console.log("cityInfo==========", cityInfo)
				addInfo(cityInfo)

			} else {
				alert('找不到地址信息');
			}
		} else {
			alert('获取地址信息失败：' + status);
		}
	});
}

function addInfo(cityInfo) {
	// 获取子节点并设置新的文本内容
	const child1 = document.getElementById('country');
	child1.textContent = cityInfo.country;
	const child2 = document.getElementById('province');
	child2.textContent = cityInfo.province;
	const child3 = document.getElementById('city');
	child3.textContent = cityInfo.city;
	const child4 = document.getElementById('district');
	child4.textContent = cityInfo.district;
	const child5 = document.getElementById('street');
	child5.textContent = cityInfo.street;
	const child6 = document.getElementById('door');
	child6.textContent = cityInfo.door;
	const child7 = document.getElementById('address');
	child7.textContent = cityInfo.address;

}
/**
 * 实时监听当前位置
 * 
 * 
 * */
function realTimeWatchPosition() {
	if (navigator.geolocation) {
		navigator.geolocation.watchPosition(function(position) {

			if (position.coords.latitude != lats && position.coords.longitude != lngs) {
				LoadAnimation(true)
				coords = {
					lat: position.coords.latitude,
					lng: position.coords.longitude
				};
				Toast('地图在变化', 1000)
				lats = position.coords.latitude;
				lngs = position.coords.longitude;
				removeMeMarker();
				// 将地图中心点移动到当前位置
				setMePositioning();
				map.setCenter(coords);
				setTimeout(() => {
					LoadAnimation(false)
				}, 1000)
			} else {
				Toast('监听地图未发生改变', 1000)
			}

		});
	}
}

/**
 * 重新定位
 * 
 * 
 * */
function Repositioning() {
	var element = document.getElementById('pos');
	element.addEventListener("click", function() {
		if (navigator.geolocation) {
			navigator.geolocation.getCurrentPosition(function(position) {
				// 创建一个坐标点对象，表示当前位置
				// 移除之前的标记

				removeMeMarker();
				lats = position.coords.latitude;
				lngs = position.coords.longitude;
				var pos = {
					lat: position.coords.latitude,
					lng: position.coords.longitude
				};
				setMapZoom(12)
				setMePositioning();
				map.setCenter(pos); // 将地图中心置于当前位置

			}, function() {
				console.log("无法获取地理位置信息");
			});
		} else {
			console.log("浏览器不支持Geolocation API");
		}


	});
}
/**
 * 热门
 * 
 * */
function myBtn1() {
	var arr1 = document.getElementsByClassName("tabs-left");
	var arr2 = document.getElementsByClassName("tabs-right");
	arr1[0].classList.add("active");
	arr2[0].classList.remove("active");
	activeTab = 1;
	drawMap();
	drawRoute();
}
/**
 * 推荐
 * 
 * */
function myBtn2() {
	var arr1 = document.getElementsByClassName("tabs-left");
	var arr2 = document.getElementsByClassName("tabs-right");
	arr2[0].classList.add("active");
	arr1[0].classList.remove("active");
	activeTab = 2;
	drawMap();
	clearDrawRoute();

}
/**
 *监听marker标记点点击事件 
 *点击后右上角显示弹窗
 * 信息窗口弹窗
 * 
 *clickIndex  点击的下标
 *
 */
function ListeningMarkerClick(marker, clickIndex) {
	var contentString = '<div id="myButton_' + clickIndex + '">' +
		'<div class="infoWindow-title">' + marker.title + '</div>' +
		'<p class="textoverflow">' +
		randomChinese(20) + '</p>' +
		'<img class="imgs" src=' + marker.imgUrl +
		'/>' +
		'</div>';
	var infowindow = new google.maps.InfoWindow({
		content: contentString,
		maxWidth: 200,
		disableAutoPan: true,
		zIndex: 100,
		pixelOffset: new google.maps.Size(-35, 0),

	});
	/**
	 * 监听点击maker标记点弹出信息窗
	 * 
	 * */
	google.maps.event.addListener(marker, 'click', function() {
		// infowindow.open(map, marker); //多个信息窗口显示
		if (openInfoWindow) { //单个信息窗口
			openInfoWindow.close();
		}
		infowindow.open(map, marker);
		openInfoWindow = infowindow;
		setTimeoutInfoWindowClick(clickIndex);
	});
	// 关闭信息窗口
	infowindow.addListener('closeclick', () => {
		Toast('关闭了信息窗口', 500)
	});
}
/**
 * 监听信息窗口点击事件
 * 开发使用场景：点击路由跳转 或者传参
 * 
 * */
function setTimeoutInfoWindowClick(clickIndex) {
	setTimeout(() => {
		var element = document.getElementById('myButton_' + clickIndex);
		element.addEventListener("click", function() {
			Toast('点击了第' + clickIndex + '个信息窗口元素')
		});
	}, 50)
}
/**
 * 监听地图滑动中心点变化
 * 
 * */
function addListenerCnterChange() {
	// 实时监听中心点变化
	map.addListener("center_changed", () => {
		const center = map.getCenter();
		// Toast(center.lat() + ", " + center.lng())
	});
	// 侦听地图载入事件
	google.maps.event.addListenerOnce(map, 'idle', function() {
		// Toast('idle事件', 1000)
	});
	// 侦听地图拖拽事件
	google.maps.event.addListener(map, 'drag', function() {
		// Toast('拖拽事件', 1000)
	});
	// 侦听地图停止事件并获取地图中心点坐标
	google.maps.event.addListener(map, 'idle', function() {
		// clearCircle()
		// var latLng = map.getCenter();
		// LoadAnimation(true)
		// lats = latLng.lat();
		// lngs = latLng.lng();
		// removeMarker();
		// drawCircle();
		// setDataMarker();
		// addListenerCnterChange()
	});
	// 监听地图缩放事件并在不同缩放级别下切换数字图标
	google.maps.event.addListener(map, 'zoom_changed', function() {});
}

/**
 * 设置marker点
 * 实际中根据实际接口情况调取该方法
 */
function setDataMarker() {
	let min = 500;
	let max = 1000;
	let randomNum = Math.floor(Math.random() * (max - min + 1)) + min;
	for (let i = 0; i < 5; i++) {
		var locObj = {
			lat: (lats + (Math.floor(Math.random() * 21) - 15) / randomNum) * 1,
			lng: (lngs - (Math.floor(Math.random() * 21) - 15) / randomNum) * 1,
			title: randomChinese(10)
		}
		const marker = new google.maps.Marker({
			position: locObj,
			title: locObj.title + '-' + i,
			imgUrl: 'https://picsum.photos/450/450?random=' + Math.floor(Math.random() * 100),
			icon: {
				url: "https://maps.gstatic.com/mapfiles/ms2/micons/blue.png",
				scaledSize: new google.maps.Size(50, 50),
			},
			map: map
		});
		markers.push(marker)
		ListeningMarkerClick(marker, i)
		// 标记点点击事件
		marker.addListener("click", () => {
			Toast("点击了第" + i + "个marker标记点",
				1000)
		});
		markerClickAnimation(marker)
	}
	setTimeout(() => {
		LoadAnimation(false)
	}, 500)
}
/**
 * 监听marker点 点击事件  赋予当前点击的marker标记点动画 
 * 并清除其他marker动画
 *  BOUNCE: 1
 *	 DROP: 2
 *	 KE: 4
 *	 PE: 3
 * */
function markerClickAnimation(marker) {
	marker.addListener('click', function() {
		if (lastClickedMarker && lastClickedMarker.getAnimation() !== null) {
			lastClickedMarker.setAnimation(null);
		}
		// 设置当前点击的 Marker 动画效果
		marker.setAnimation(google.maps.Animation.PE);
		// 记录当前点击的 Marker
		lastClickedMarker = marker;
	});
}
/**
 * 移入marker标记点
 * 
 * */
function removeMarker() {
	for (var i = 0; i < markers.length; i++) {
		markers[i].setMap(null);
	}
	// 清空数组
	markers = [];
}
/**
 * 清除画圆
 * 
 * */
function clearCircle() {
	if (cityCircle) {
		cityCircle.setMap(null)
	}
}

/**
 * 画区域
 * （省、市、区）
 * 省 市  区  经纬度来源参考 ：http://datav.aliyun.com/portal/school/atlas/area_selector
 *  例子： JSON 包 https://gitcode.net/mirrors/lyingying/echarts-mapJson
 * */
function drawRegion() {
	const polygonsData = []
	if (newPolygon) {
		// 清除地图省 市区 标记
		clearDrawRegion();
	}
	if (activeTab == 1) {
		for (var k = 0; k < cityObjArr.length; k++) {
			var obj = {
				polygonCoords: cityObjArr[k],
				color: getRandomColor(),
				strokeWeight: 2,
			}
			polygonsData.push(obj)
		}
	} else if (activeTab == 2) {
		for (var k = 0; k < cityObjTwoArr.length; k++) {
			var obj = {
				polygonCoords: cityObjTwoArr[k],
				color: getRandomColor(),
				strokeWeight: 2,
			}
			polygonsData.push(obj)
		}
	}
	polygonsData.forEach((polygon) => {
		var polygonObj = new google.maps.Polygon({
			paths: polygon.polygonCoords,
			strokeColor: getRandomColor(), // 边界线颜色
			strokeOpacity: 0.8, // 边界线透明度
			strokeWeight: 2, // 边界线厚度
			fillColor: getRandomColor(), // 填充颜色
			fillOpacity: 0.2, // 填充透明度
			map: map,
		});
		newPolygon.push(polygonObj)
	});
}

/**
 * 清除省 市 区
 * 
 * 
 * */
function clearDrawRegion() {
	for (var i = 0; i < newPolygon.length; i++) {
		newPolygon[i].setMap(null);
	}
	// 清空数组
	newPolygon = [];
}

/**
 * 画圆
 * 
 */
function drawCircle() {
	cityCircle = new google.maps.Circle({
		strokeColor: "#FF0000", // 边框颜色
		strokeOpacity: 0.6, // 边框透明度
		strokeWeight: 0.8, // 边框宽度
		fillColor: "#FF0000", // 填充颜色
		fillOpacity: 0.15, // 填充透明度
		map,
		center: {
			lat: lats,
			lng: lngs
		},
		radius: maxValue * 500, //半径
	});
}

/**
 * 初始化
 * 
 */
function initMap() {

	if (lats && lngs) {
		coords = {
			lat: lats,
			lng: lngs
		};
	} else {
		navigator.geolocation.getCurrentPosition(function(position) {
			coords = {
				lat: position.coords.latitude,
				lng: position.coords.longitude
			};
			lats = position.coords.latitude;
			lngs = position.coords.longitude
		});
	}
	map = new google.maps.Map(document.getElementById('map'), {
		zoom: zoom,
		center: coords,
		mapId: mapId,
		animation: 'BOUNCE'
	});
	Repositioning();
	drawRegion()
	setMePositioning();
	drawCircle();
	setDataMarker();
	addListenerCnterChange();
	drawRoute();
	addListerBtnClickClose();
	ListeningInputBox();
	realTimeWatchPosition();

}
/**
 * 监听输入框 输入事件
 * 
 * */
function ListeningInputBox() {
	// 创建 Autocomplete 实例
	const input = document.getElementById("search-box");
	const autocomplete = new google.maps.places.Autocomplete(input);
	// 设置 Autocomplete 参数
	autocomplete.setFields(["geometry", "name"]);
	// 添加事件监听器，当用户选择某个地点时，在地图上标记出所选位置
	autocomplete.addListener("place_changed", function() {
		const place = autocomplete.getPlace();
		var latlng = JSON.parse(JSON.stringify(place.geometry.location))
		console.log("place===", latlng)
		getAddress(latlng.lat, latlng.lng);
		if (!place.geometry) {
			console.log("返回的地理信息无效！");
			return;
		}
		// 将地图中心点指向用户所选位置，并设置标记
		if (searchmarker) { //去除marker标记点
			searchmarker.setMap(null)
			searchmarker = ""
		}
		map.setCenter(place.geometry.location);
		searchmarker = new google.maps.Marker({
			map: map,
			position: place.geometry.location,
			title: place.name,
		});
	});
}
/**
 * 画路线图
 *  经度纬度加了随机函数 故 起始点和终点 各不一致
 *  需要用到此功能自行调整
 * 
 * */
function drawRoute() {
	const directionsService = new google.maps.DirectionsService();
	var TravelMode = [{
			id: 1,
			name: "DRIVING",
			color: "#ea4335"
		},
		{
			id: 2,
			name: "WALKING",
			color: "#7825fa"
		},
		{
			id: 3,
			name: "BICYCLING",
			color: "#fa6200"
		},
		{
			id: 4,
			name: "TRANSIT",
			color: "#ff00ff"
		}
	]
	for (var i = 0; i < TravelMode.length; i++) {
		startDrawRoute(directionsService, TravelMode[i])
	}

}
/**
 * 
 * 开始绘制以下路线图
 *	DRIVING：驾车模式。这是默认的出行方式，计算出行路线时考虑当时的实时交通情况。
 *可用  WALKING：步行模式。计算步行路线时会考虑人行道、人行横道等规则，因此得到的路线可能与驾车路线不同。
 *可用  BICYCLING：骑行模式。计算骑行路线时，避开了折返点和拥堵路段，提供了适合骑自行车的路线。
 * TRANSIT：公共交通模式。在城市间导航中被广泛使用，提供了乘坐公共交通工具（如公交车、地铁、火车和轻轨）的路线方案。
 * FLIGHTS：飞行模式。在 Google Maps 平台上无法使用，此模式只适用于各大航空公司网站等其他服务商范畴内。
 * 
 * */
function startDrawRoute(directionsService, travelMode) {
	// 随机数字而已  动态数字  方便查询效果
	let min = 5000;
	let max = 10000;
	let randomNum = (Math.floor(Math.random() * (max - min + 1)) + min) / 500000;
	// 起点坐标
	const origin = {
		lat: 34.7382820208 + randomNum,
		lng: 113.64360881345 + randomNum
	};
	// 终点坐标
	const destination = {
		lat: 34.78194 + randomNum,
		lng: 113.622512 + randomNum
	};



	var directionsRenderer = new google.maps.DirectionsRenderer({
		map: map,
		suppressMarkers: true, // 关闭默认图标
		polylineOptions: {
			strokeColor: travelMode.color, //设置路线颜色
			strokeWeight: 5 //设置路线宽度
		},
		// draggable: true //允许用户拖动路线

	});
	const request = {
		origin: origin,
		destination: destination,
		travelMode: travelMode.name, //绘制路线的模式
	};



	directionsService.route(request,
		(result, status) => {
			if (status === "OK") {
				directionsRenderer.setDirections(result);
				directionsRenderer.setMap(map);



				// 获取起点和终点的信息并添加标记
				var startMarker = new google.maps.Marker({
					position: result.routes[0].legs[0].start_location,
					map: map,
					icon: {
						url: "https://maps.gstatic.com/mapfiles/ms2/micons/pink.png",
						scaledSize: new google.maps.Size(50, 50),
					},
				});
				drawRouteMarker.push(startMarker)
				var endMarker = new google.maps.Marker({
					position: result.routes[0].legs[0].end_location,
					map: map,
					icon: {
						url: "https://maps.gstatic.com/mapfiles/ms2/micons/orange.png",
						scaledSize: new google.maps.Size(50, 50),
					},
				});
				drawRouteMarker.push(endMarker)
				directionsRendererArr.push(directionsRenderer)



				//显示路线的总距离
				// console.log('距离===', directionsRenderer.directions.routes[0].legs[0].distance.text)
				// console.log('时间===', directionsRenderer.directions.routes[0].legs[0].duration.text)
				// for (var k = 0; k < directionsRenderer.directions.routes[0].legs[0].steps.length; k++) {
				// 	console.log(directionsRenderer.directions.routes[0].legs[0].steps[k].instructions)
				// }
			} else {
				// console.log(travelMode, "绘制失败===", result)
			}
		}
	);
}
/**
 * 清除路线
 * 
 * */
function clearDrawRoute() {
	if (directionsRendererArr) { //清空线
		for (var i = 0; i < directionsRendererArr.length; i++) {
			directionsRendererArr[i].setMap(null);
		}
		// 清空数组
		directionsRendererArr = [];
	}
	if (drawRouteMarker) { //清空标记点
		for (var i = 0; i < drawRouteMarker.length; i++) {
			drawRouteMarker[i].setMap(null);
		}
		// 清空数组
		drawRouteMarker = [];

	}

}


/**
 * 绘制地图
 * 
 * 
 * */
function drawMap() {
	LoadAnimation(true)
	// 删除
	clearCircle();
	// removeMeMarker();
	removeMarker();
	// 绘制
	drawCircle();
	setDataMarker();

	addListenerCnterChange()
	setMapZoom(zoom);
	drawRegion()

}
/**
 * 可视地图放大缩小
 * 
 * 
 * */
function setMapZoom(newZoom) {
	map.setZoom(newZoom);
}
/*
 *设置个人定位以及显示marker标记点
 * 
 **/
function setMePositioning() {
	meMarker = new google.maps.Marker({
		position: {
			lat: lats,
			lng: lngs
		},
		icon: {
			url: './img/1.png',
			scaledSize: new google.maps.Size(75, 80),
		},
		animation: 4,
		map: map
	});
	LoadAnimation(false)
}
/**
 * 移除个人信息标记点
 * 
 * 
 * */
function removeMeMarker() {
	meMarker.setMap(null);
	meMarker = '';
}
/**
 * 控制地图大小
 * 缩放和放大
 * 通过zoom来控制
 * 
 * */
function setMapCnterZooms() {
	map.setOptions({
		center: {
			lat: lats + 0.001,
			lng: lngs + 0.0001
		},
		zoom: zoom + 0.1
	});
}
/**
 * 加载动画
 * 
 */
function LoadAnimation(isFalse) {
	if (isFalse) {
		document.getElementById("loader").style.display = "inline";
	} else {
		document.getElementById("loader").style.display = "none";
	}

}

/**
 * 
 * 获取url地址参数
 * 
 * */

function getQueryVariable(variable) {
	var query = decodeURI(window.location.search.substring(1));
	var vars = query.split("&");
	for (var i = 0; i < vars.length; i++) {
		var pair = vars[i].split("=");
		if (pair[0] == variable) {
			return pair[1];
		}
	}
	return (false);
}
/**
 * 随机生成颜色rgb值
 * 
 * */

function getRandomColor() {
	const letters = '0123456789ABCDEF'; // 16进制颜色表示中可能出现的字符
	let color = '#';
	for (let i = 0; i < 6; i++) { // 随机生成6位十六进制数
		color += letters[Math.floor(Math.random() * 16)]; // 根据随机数选取相应的字符
	}
	return color;
}


/**
 * 随机生成中文文字
 * 辅助方法 实际中可废弃
 * */
function randomChinese(num) {

	let str = "";
	const words = ["Lorem", "ipsum", "dolor", "sit", "amet", "consectetur", "adipiscing", "elit", "sed", "do",
		"eiusmod", "tempor",
		"incididunt", "ut", "labore", "et", "dolore", "magna", "aliqua", "Ut", "enim", "ad", "minim", "veniam",
		"quis",
		"nostrud", "exercitation", "ullamco", "laboris", "nisi", "ut", "aliquip", "ex", "ea", "commodo",
		"consequat",
		"Duis", "aute", "irure", "dolor", "in", "reprehenderit", "in", "voluptate", "velit", "esse", "cillum",
		"dolore",
		"eu", "fugiat", "nulla", "pariatur", "Excepteur", "sint", "occaecat", "cupidatat", "non", "proident",
		"sunt",
		"in", "culpa", "qui", "officia", "deserunt", "mollit", "anim", "id", "est", "laborum"
	];
	for (let i = 0; i < num; i++) {
		const randomWord = words[Math.floor(Math.random() * words.length)];
		str += randomWord + " ";
	}
	return str.trim();
}
/**
 * 监听点击关闭按钮事件
 * 
 * */
function addListerBtnClickClose() {
	var docum = document.getElementById('close_btn');
	docum.addEventListener("click", function() {
		// inline
		document.getElementById("slider").style.display = "none";

	});

}


window.initMap = initMap;



const appHtml = {
	data() {
		return {
			value: maxValue, //默认筛选距离


		}
	},
	methods: {
		// 滑动滑块
		onChange(e) {
			console.log(e)
			maxValue = e;
			nums = 15 - maxValue / 3;
			zoom = Number(nums); //地图缩放比例
			drawMap();
		}

	}
}
// 创建
const app = Vue.createApp(appHtml)
// 引入vant组件
app.use(vant);
// 自动注册 Lazyload 组件
app.use(vant.Lazyload);

// 引入button
app.use(vant.Button);
// 引入宫格布局
app.use(vant.Grid);
app.use(vant.GridItem);
// 空状态
app.use(vant.Empty);

app.mount('#slider');